<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			body {
				background: #f3f3f3;
			}

			.i-chart-circle {
				display: inline-block;
				position: relative
			}

			.i-chart-circle-inner {
				width: 100%;
				text-align: center;
				position: absolute;
				left: 0;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				line-height: 1
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="svg">
				<i-Circle :percent="25" trail-color="rgba(255,255,255,0.5)" :size="300" :trail-width="5" :stroke-width="5">
					<div>
						<p>searchfield-results-decorationp</p>
						<p>asdasd</p>
					</div>
				</i-Circle>
			</div>
			<div id="canvas"></div>
			<button @click="tocanvas" type="button">截图</button>
		</div>
		<div id="svg2"></div>
		<script src="vue.min.js"></script>
		<script src="js/rgbcolor.min.js"></script>
		<script src="js/stackblur.min.js"></script>
		<script src="js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/canvg.js" type="text/javascript" charset="utf-8"></script>

		<script src="components/cricle.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				
				mounted: function() {
					var self = this
					setTimeout(function(){
						console.log(document.querySelector('.svg-wrap').innerHTML);
						self.render(document.querySelector('.svg-wrap').innerHTML,300,300)
					},2000)	

				},
				methods: {
					tocanvas: function() {
						var opts = {
							scale: 2, // 添加的scale 参数
							useCORS: true // 【重要】开启跨域配置
						}
						html2canvas(document.querySelector("#svg"), opts).then((canvas) => {
							var dataUrl = canvas.toDataURL()
							console.log(dataUrl);	
							var img = document.createElement('img')
							img.src=dataUrl
							document.body.appendChild(img)
						})
					},
					render:function (svg, width, height) {
					    document.createElement('canvas')
					    var c = document.createElement('canvas');
					    c.width = width || 500;
					    c.height = height || 500;
						document.querySelector('.svg-wrap').innerHTML = '';
					    document.querySelector('.svg-wrap').appendChild(c);
					    canvg(c, svg);
					}
				}
			})
		</script>
	</body>
</html>
